<template>
	<div>
		<el-dialog
			v-model="viewQrDialog"
			title="考试"
			:width="props.dialogWidth"
		>
			<div class="dialog-table">
				<div
					:style="{
						width: props.width + 'px',
						height: props.height + 'px',
					}"
					:id="props.id"
					:ref="setRef"
				></div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, defineExpose, watch, reactive } from "vue";
import QRCode from "qrcodejs2";
const viewQrDialog = ref(false);
const viewQrData = reactive({
	qrcode: null,
	qrRef: null,
	text: "", // 后端返回的二维码地址
});

const props = defineProps({
	id: {
		type: String,
		required: true,
	},
	dialogWidth: {
		// 弹框宽度   带单位
		type: String,
		default: "30%",
	},
	width: {
		type: String,
		default: "128",
	},
	height: {
		type: String,
		default: "128",
	},
	colorDark: {
		type: String,
		default: "#000000",
	},
	colorLight: {
		type: String,
		default: "#ffffff",
	},
});

const openDialog = (row) => {
	console.log(row, 66);
	//  this.text = row.?
	viewQrDialog.value = true;
};
const setRef = (el) => {
	viewQrData.qrRef = el;
};
watch(
	() => viewQrDialog.value,
	(val) => {
		if (val) {
			createQrcode();
		}
	}
);

function createQrcode() {
	if (viewQrData.qrcode) {
		// 有新的二维码地址了，先把之前的清除掉
		viewQrData.qrRef.innerHTML = "";
	}
	const timer = setTimeout(() => {
		viewQrData.qrcode = new QRCode(viewQrData.qrRef, {
			text: props.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
			width: props.width, // 二维码宽度 （不支持100%）
			height: props.height, // 二维码高度 （不支持100%）
			colorDark: props.colorDark,
			colorLight: props.colorLight,
			correctLevel: QRCode.CorrectLevel.H,
		});
		clearTimeout(timer);
	});
}

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.dialog-table {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
